<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-face-edit" th:object="${face}">
            <input id="faceId" name="faceId" th:field="*{faceId}"  type="hidden">
            <input name="deptId"  type="hidden"  th:field="*{deptId}" id="treeId"/>
            <input name="deptId"  type="hidden"  th:field="*{deptId}" id="treeId"/>
            <input name="imgserver"  id="imgserver" type="hidden"  th:value="${@config.getKey('sys.face.static.servername')}">
			<div class="form-group">
				<label class="col-sm-3 control-label">部门名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="deptName" onclick="selectDeptTree()" readonly="true" id="treeName" th:field="*{dept.deptName}">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">工号：</label>
				<div class="col-sm-8">
					<input id="no" name="no" th:field="*{no}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
				    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
						<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">人脸照片存放地址：</label>
				<div class="col-sm-8">
					<input id="url" name="url" th:field="*{url}" class="form-control" type="hidden">
					<input id="urlImg" name="file" type="file" data-show-caption="true" >
					
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" th:field="*{remark}" class="form-control" type="text">
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "system/face"
		
		$("#form-face-edit").validate({
			rules:{
				deptName:{
					required:true,
				},
				name:{
					required:true,
				},
				url:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-face-edit').serialize());
	        }
	    }
		
		  /*用户管理-新增-选择部门树*/
	      function selectDeptTree() {
	      	var treeId = $("#treeId").val();
	      	var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
	      	var url = ctx + "system/dept/selectDeptTree/" + deptId;
				var options = {
					title: '选择部门',
					width: "380",
					url: ctx + "system/dept/selectDeptTree/" + deptId,
					callBack: doSubmit
				};
				$.modal.openOptions(options);
			}
			
	      function doSubmit(index, layero){
				var tree = layero.find("iframe")[0].contentWindow.$._tree;
				if ($.tree.notAllowParents(tree)) {
					var body = layer.getChildFrame('body', index);
	  			$("#treeId").val(body.find('#treeId').val());
	  			$("#treeName").val(body.find('#treeName').val());
	  			layer.close(index);
				}
			} 
	      
	      function initAddFile(ctrlName,url) {    
	    	    var control = $('#' + ctrlName); 
	    	    control.fileinput({
	    	    	theme: "explorer", //主题
	    	        language: 'zh', //设置语言
	    	        uploadUrl: prefix+'/upload',  //上传地址
	    	        showUpload: false, //是否显示上传按钮
	    	        showRemove:true,
	    	        dropZoneEnabled: false,
	    	        showCaption: true,//是否显示标题
	    	        allowedPreviewTypes: ['image'],
	    	        allowedFileTypes: ['image'],
	    	        allowedFileExtensions:  ['jpg', 'gif', 'png', 'jpeg'],
	    	        maxFileSize : 0,
	    	       	maxFileCount: 1,
	    	       	maxImageWidth: 2000, //图片的最大宽度
	    	        maxImageHeight: 2000,//图片的最大高度
	    	        uploadAsync: true, //异步上传  
	    	        enctype: 'multipart/form-data',
	    	        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
	    	        initialPreview: [ 
//	    	         		预览图片的设置
						"<img src='"+url+"' class='file-preview-image'  style='max-width:100%;max-height:100%;'>",
	    	        ],
	    	        layoutTemplates:{
	    	        	actionDelete:'',
	    	        	actionUpload:'',
	    	        },
	    	    }).on("filebatchselected", function(event, files) {  
	    	        $(this).fileinput("upload");  
	    	    })  
	    	    .on("fileuploaded", function(event, data) {  
	    	        $("#url").attr("value",data.response);  
	    		});  
	    	}

	    	$(function () {
	    		var url =  $("#url").val();
	    		var imgserver= $("#imgserver").val();
	    		initAddFile("urlImg",imgserver+url);
	    		$("#urlImg").on("fileuploaded", function (event, data, previewId, index) {

	    			var result = data.response;
	    	        var filePath = result.filePath;
	    	        var fileNameReal = result.fileNameReal;
	    	        var fileNameShow = result.fileNameShow;
	    	        var fileSize = result.fileSize;
	    			
	    			$("#url").val(filePath);  
	    	    });  
	    		
	    		$("#urlImg").on("filecleared",function(event, data, msg){
	    			$("#url").val("");  
	    		});

	    	})
	      
	</script>
</body>
</html>
